<template>
  <div>
    <div class="poster-lyric-page" v-show="!cropperIsShow">
      <div class="s-cropper-header">
        <div class="close-btn" @click="close">
          <svg
            t="1722560409746"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6750"
            width="24"
            height="24"
          >
            <path
              d="M230.8608 544l198.8096 198.8096a32 32 0 0 1-45.2608 45.2608l-249.856-249.856a37.12 37.12 0 0 1 0-52.48l249.856-249.8048a32 32 0 0 1 45.2608 45.2608L230.8608 480H870.4a32 32 0 1 1 0 64H230.8608z"
              fill="#ffffff"
              p-id="6751"
            ></path>
          </svg>
          <div>歌词图片</div>
        </div>
        <div @click="handleShare" class="share-btn">
          <svg
            t="1722584239500"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7813"
            width="24"
            height="24"
          >
            <path
              d="M288 373.333333c-82.432 0-149.333333 66.922667-149.333333 149.333334a149.333333 149.333333 0 0 0 149.333333 149.333333c82.496 0 149.333333-66.816 149.333333-149.333333 0-82.410667-66.88-149.333333-149.333333-149.333334z m0 64c47.104 0 85.333333 38.250667 85.333333 85.333334 0 47.146667-38.186667 85.333333-85.333333 85.333333a85.333333 85.333333 0 1 1 0-170.666667zM757.333333 672a128.021333 128.021333 0 1 0 128 128c0-70.656-57.344-128-128-128z m0 64a64.021333 64.021333 0 1 1-64 64c0-35.328 28.672-64 64-64zM757.333333 117.333333a128.021333 128.021333 0 1 0 128 128c0-70.656-57.344-128-128-128z m0 64a64.021333 64.021333 0 1 1-64 64c0-35.328 28.672-64 64-64z"
              fill="#ffffff"
              p-id="7814"
            ></path>
            <path
              d="M356.565333 580.864a32 32 0 0 1 43.904-10.965333l266.666667 160a32 32 0 0 1-32.938667 54.869333l-266.666666-160a32 32 0 0 1-10.965334-43.904zM643.050667 264.789333a32 32 0 0 1 36.565333 52.522667l-256 178.282667a32 32 0 0 1-36.565333-52.522667l256-178.282667z"
              fill="#ffffff"
              p-id="7815"
            ></path>
          </svg>
        </div>
      </div>

      <div class="canvas-container" :style="{ 'align-items': align }">
        <div class="photo-btn" v-if="photoShow">
          <input
            type="file"
            style="opacity: 0; position: absolute; top: 0px; left: 0px; width: 45px; height: 45px"
            @change="handleClickPhoto"
            accept="image/png, image/jpeg"
          />
          <svg
            t="1722481140996"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5742"
            width="45"
            height="45"
          >
            <path
              d="M846.525959 288.822035 733.689055 288.822035l-48.477085-116.694769c-11.257391-27.103288-37.495986-44.61615-66.845431-44.61615L408.757614 127.511115c-29.348422 0-55.587016 17.512862-66.845431 44.61615l-48.475038 116.694769L180.598194 288.822035c-62.71946 0-113.7456 51.02614-113.7456 113.7456l0 378.463658c0 62.71946 51.02614 113.7456 113.7456 113.7456l665.927765 0c62.71946 0 113.7456-51.02614 113.7456-113.7456L960.27156 402.567635C960.27156 339.847152 909.24542 288.822035 846.525959 288.822035zM918.909523 781.030269c0 39.912012-32.471552 72.383564-72.383564 72.383564L180.598194 853.413833c-39.913035 0-72.383564-32.471552-72.383564-72.383564L108.21463 402.567635c0-39.912012 32.470529-72.383564 72.383564-72.383564l126.641305 0c8.357342 0 15.892969-5.02955 19.098987-12.748349l53.770648-129.443118c4.824889-11.614525 16.070001-19.120476 28.64848-19.120476l209.608925 0c12.57848 0 23.823592 7.504928 28.646434 19.1215l53.772694 129.443118c3.207042 7.716752 10.742668 12.747325 19.10001 12.747325l126.641305 0c39.912012 0 72.383564 32.471552 72.383564 72.383564L918.910547 781.030269z"
              fill="#ffffff"
              p-id="5743"
            ></path>
            <path
              d="M513.561565 349.83769c-115.843378 0-210.089879 94.245478-210.089879 210.089879s94.245478 210.089879 210.089879 210.089879 210.089879-94.245478 210.089879-210.089879S629.405967 349.83769 513.561565 349.83769zM513.561565 728.655412c-93.036953 0-168.727843-75.691913-168.727843-168.727843s75.69089-168.727843 168.727843-168.727843c93.03593 0 168.727843 75.691913 168.727843 168.727843S606.598518 728.655412 513.561565 728.655412z"
              fill="#ffffff"
              p-id="5744"
            ></path>
            <path
              d="M456.241069 644.973524c-28.319999-19.131733-45.227064-50.924833-45.227064-85.046978 0-11.42112-9.258874-20.681018-20.681018-20.681018s-20.681018 9.259898-20.681018 20.681018c0 47.879474 23.713075 92.484368 63.433728 119.319549 3.549849 2.397606 7.574512 3.546779 11.559267 3.546779 6.638187 0 13.159718-3.190669 17.154705-9.106402C468.193285 664.222937 465.704604 651.368164 456.241069 644.973524z"
              fill="#ffffff"
              p-id="5745"
            ></path>
            <path
              d="M263.747963 381.095601l-86.860277 0c-11.422144 0-20.681018 9.258874-20.681018 20.681018s9.258874 20.681018 20.681018 20.681018l86.860277 0c11.422144 0 20.681018-9.258874 20.681018-20.681018S275.170107 381.095601 263.747963 381.095601z"
              fill="#ffffff"
              p-id="5746"
            ></path>
          </svg>
        </div>
        <canvas ref="canvas"></canvas>
      </div>

      <div class="photo-type-container">
        <div class="photo-type-wrap">
          <div
            class="photo-type-item"
            :class="{ active: currentPhotoType === index }"
            :key="index"
            v-for="(item, index) in photoTypeUrls"
            @click="handleChangeType(item, index)"
          >
            <div class="item-title">{{ item.title }}</div>
            <div class="item-image">
              <img :src="item.url" class="img" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cropper-wrap" v-if="cropperIsShow">
      <CropperImage :src="uploadUrl" @close="cropperIsShow = !cropperIsShow" @change="handleChangeImgUrl" />
    </div>
    <div v-if="modelShow" class="model" @click.stop="closeModel">
      <div class="model-close-btn">x</div>
      <div class="img-wrap">
        <img :src="shareImgUrl" alt="分享图片" />
      </div>
      <div class="model-desc">长按保存图片</div>
    </div>
  </div>
</template>
<script>
import CropperImage from "./CropperImage.vue";
import type0Png from "./assets/type0.png";
import type1Png from "./assets/type1.png";
import wlPng from "./assets/wl.png";
import draw, { DrawPosterTypeEnum } from "./draw";
export default {
  name: "PosterLyric",
  components: {
    CropperImage,
  },
  props: {
    lyric: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    qrcodeUrl: {
      type: String,
      default: "https://star.top237.top",
    },
    fontSize: {
      type: Number,
      default: 43,
    },
  },
  data() {
    return {
      ctx: null,
      canvas: null,
      imgUrl: wlPng,
      cropperIsShow: false,
      uploadUrl: null,
      currentPhotoType: DrawPosterTypeEnum.image,
      photoTypeUrls: [
        {
          title: "默认",
          url: type0Png,
          value: DrawPosterTypeEnum.image,
        },
        {
          title: "文字",
          url: type1Png,
          value: DrawPosterTypeEnum.text,
        },
      ],
      posterDraw: null,
      modelShow: false,
      shareImgUrl: "",
      align: "start",
    };
  },
  computed: {
    drawTypeValue() {
      return this.photoTypeUrls[this.currentPhotoType].value;
    },
    photoShow() {
      return [DrawPosterTypeEnum.image].includes(this.currentPhotoType);
    },
    options() {
      if (this.currentPhotoType === DrawPosterTypeEnum.image) {
        return {
          drawType: this.drawTypeValue,
          lyric: this.lyric,
          title: this.title,
          imgUrl: this.imgUrl,
          qrcodeUrl: this.qrcodeUrl,
          onSuccess: this.onSuccess,
          styles: {
            padding: 20,
            textBoxPadding: 40,
            fontSize: this.fontSize,
          },
        };
      }

      if (this.currentPhotoType === DrawPosterTypeEnum.text) {
        return {
          drawType: this.drawTypeValue,
          lyric: this.lyric,
          title: this.title,
          imgUrl: this.imgUrl,
          qrcodeUrl: this.qrcodeUrl,
          onSuccess: this.onSuccess,
          styles: {
            padding: 80,
            textBoxPadding: 80,
            letterSpacing: 10,
            fontSize: this.fontSize,
          },
        };
      }

      return {
        drawType: this.drawTypeValue,
        lyric: this.lyric,
        title: this.title,
        imgUrl: this.imgUrl,
        qrcodeUrl: this.qrcodeUrl,

        onSuccess: this.onSuccess,
        styles: {
          padding: 20,
          textBoxPadding: 20,
          fontSize: this.fontSize,
        },
      };
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.canvas = this.$refs.canvas;
      if (this.canvas.getContext) {
        this.ctx = this.$refs.canvas.getContext("2d", { alpha: false });
        this.resetDraw();
      }
    },
    handleClickPhoto(e) {
      if (e.target.files.length > 0) {
        const file = e.target.files[0];
        this.uploadUrl = URL.createObjectURL(file);
        this.cropperIsShow = true;
      }
    },
    resetDraw() {
      this.posterDraw = draw(this.ctx, this.options);
    },
    handleChangeImgUrl(url) {
      this.imgUrl = url;
      this.cropperIsShow = false;
      this.resetDraw();
    },
    handleChangeType(item, index) {
      if (this.currentPhotoType === index) {
        return;
      }
      this.currentPhotoType = index;
      console.log("item-->", item);
      this.resetDraw();
    },
    close() {
      this.$emit("close");
    },
    handleShare() {
      console.log(this.posterDraw);
      const url = this.posterDraw.toDataURL();
      console.log("url-->", url);
      this.shareImgUrl = url;
      this.modelShow = true;
    },
    closeModel() {
      this.modelShow = false;
    },
    onSuccess() {
      this.align = this.canvas.clientHeight > window.innerHeight - 300 ? "start" : "center";
    },
  },
};
</script>
<style scoped>
.poster-lyric-page {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #000;
}

canvas {
  width: 100%;
}

.close-btn {
  display: flex;
  align-items: center;
  column-gap: 12px;
}

.cropper-wrap {
  position: fixed;
  width: 100%;
  height: 100vh;
}

.canvas-container {
  flex: 1;
  display: flex;
  justify-content: center;
  max-height: calc(100vh - 210px);
  overflow-y: auto;
  position: relative;
  width: 100%;
}

.canvas-container .photo-btn {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #fff;
}

.s-cropper-header {
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  padding-inline: 24px;
  position: sticky;
  top: 0px;
  left: 0px;
  font-size: 18px;
}

.photo-type-container {
  overflow-y: hidden;
  overflow-x: auto;
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 160px;
  background-color: #000;
}

.photo-type-container .photo-type-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
  width: 100%;
  /* height: 160px; */
  column-gap: 16px;
  padding: 10px 20px;
}

.photo-type-wrap .photo-type-item {
  width: 80px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  text-align: center;
  flex-shrink: 0;
  row-gap: 4px;
  box-sizing: border-box;
  border: 1px solid transparent;
}

.photo-type-item.active {
  border: 1px solid red;
}

.photo-type-item .item-title {
  width: 100%;
  color: #fff;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
}

.photo-type-item .item-image {
  width: 100%;
}

.item-image .img {
  width: 100%;
}

.model {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 30px;
  z-index: 10;
  top: 0px;
  left: 0px;
}

.model .img-wrap {
  width: 100%;
  max-height: 90%;
  overflow-y: auto;
}

.model .img-wrap img {
  width: 100%;
  height: auto;
}

.model .model-close-btn {
}

.model .model-desc {
  text-align: center;
  color: #fff;
  margin-top: 10px;
}
</style>
